<template>
    <div ref="chartContainer" style="width: 800px;height:400px;"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    name: 'ReservoirChart',
    mounted() {
        this.initChart();
    },
    methods: {
        initChart() {
            // 创建 Echarts 实例
            const chart = echarts.init(this.$refs.chartContainer);
            // 准备数据，这里假设的示例数据
            const krList = [0, 12, 14, 16, 18];
            const swList = [0, 70, 90, 110, 130];

            let arr = krList.map((level, index) => [level, swList[index]]);
            console.log('arr-->', arr)
            // 配置图表选项
            const option = {
                title: {
                    text: '水库水位和库容关系曲线'
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'value',
                    name: '库容（万 m³）'
                },
                yAxis: {
                    type: 'value',
                    name: '水位（m）'
                },
                series: [
                    {
                        name: '关系曲线',
                        type: 'line',
                        smooth: true,
                        data: arr
                    }
                ]
            };
            // 应用图表选项
            chart.setOption(option);
        }
    }
};
</script>